<template>
    <div>
        <div class="less">
            <p>1
                <span>22222</span>
            </p>
            <h2>12121212</h2>
        <div class="less-p"><p>dsbcjhk</p></div>
        </div>
        <p>11111
            <span></span>
        </p>
    </div>
</template>
<script>

export default ({
    name:'less',
    data() {
    return{

        }  
    },
})
</script>
<style lang="less" scoped>
@import url(../style/com.less);
    @a:#f2b4b4;
    @w:100px;
    .less{
        width: 300px;
        color: @a;
        border: 10px solid @a;
        font-size:16px;
        &>p{
            width: 10px;
            color: red;
            border-right: 20px solid @a;
            span{
                width: @w;
                height: 10px;
                background: blueviolet;
            }
            &:hover{
                color: coral;
            }
        }
        &-p{
            font-size: 100px;
            color: skyblue;
        }
        h2{
            background: red;
            width: 100px ./ 2;//less除法
            border: @w + 10 solid skyblue(blue,100%);
        }
    }
    
</style>
